<!-- 预约页 -->
<template>
    <page-view-top-nav :element="element" />
    <el-scrollbar height="100%">
        <div class="schedule-detail">
            <div class="top-background" :style="{ backgroundColor: customFeature.theme.primaryColor }"></div>

            <div class="card-wrap">
                <div class="card-avatar">
                    <el-avatar class="card-avatar-image">头像</el-avatar>
                    <div class="card-avatar-title">预约名称</div>
                </div>
                <div class="card-info">
                    <div class="card-info-row">
                        <div class="row-left">联系电话：</div>
                        <div class="row-content">xxxxxx</div>
                    </div>
                    <div class="card-info-row">
                        <div class="row-left">联系地址：</div>
                        <div class="row-content">xxxxxx</div>
                    </div>
                </div>
            </div>

            <div class="row-wrap">
                <template v-for="(item, index) in ['周一', '周二', '周三', '周四',]" :key="index">
                    <div class="col-item" :style="{ color: customFeature.theme.primaryFontColor }">
                        <div class="col-item-top">{{ item }}</div>
                        <div class="col-item-bottom">01-0{{ index + 3 }}</div>
                        <div class="col-item-tag" :style="{
                            borderTopColor: customFeature.theme.primaryColor,
                            color: customFeature.theme.secondaryFontColor
                        }"></div>
                    </div>
                </template>
            </div>

            <div class="content-wrap">
                <div class="content-header-txt">2022-01-03 周一 上午</div>
                <div class="content-list">
                    <div class="content-item">08:00</div>
                    <div class="content-item">08:10</div>
                    <div class="content-item">08:20</div>
                    <div class="content-item">08:30</div>
                    <div class="content-item">08:40</div>
                    <div class="content-item">08:50</div>
                    <div class="content-item">09:00</div>
                    <div class="content-item">09:10</div>
                    <div class="content-item">09:20</div>
                    <div class="content-item">09:30</div>
                    <div class="content-item">10:00</div>
                    <div class="content-item">11:00</div>
                </div>
            </div>
        </div>
    </el-scrollbar>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import PageViewTopNav from '../../page-view-top-nav'
export default defineComponent({
    name: 'Schedule',
    components: {
        PageViewTopNav
    },
    props: {
        element: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { element } = toRefs(props)

        const customFeature = computed(() => element.value?.customFeature || {})

        return {
            element,
            customFeature
        }
    }
})
</script>

<style lang="less" scoped>
@import './schedule.less';
</style>